import React,{useEffect,useState,useRef} from 'react'
import { Table, Tag, Select, Space , Button,Modal ,Checkbox, Form, Input} from 'antd';
import {useDispatch,useSelector} from "react-redux"
import * as action from "../../action"

 
function Shop() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    let myref = useRef(null)
    let [editIndex,setEditIndex] = useState(0)
    let [isadd,setIsadd] = useState("新增")
    let [columns,setColumns] = useState(
        [
            {
              title: '商品名',
              dataIndex: 'goodsname',
              key: 'goodsname',
              render: (text) => <a>{text}</a>,
            },
            {
              title: '状态',
              dataIndex: 'status',
              key: 'status',
            },
            {
              title: '员工姓名',
              dataIndex: 'info',
              key: 'info',
            },
            {
                title: '员工电话',
                dataIndex: 'phone',
                key: 'phone',
            },
            {
                title: '商品数量',
                dataIndex: 'num',
                key: 'num',
            },
            {
              title: 'Action',
              key: 'action',
              render: (_, record,index) => (
                <Space size="middle">
                  <a onClick={()=>editfn(record,index)}>编辑</a>
                  <a onClick={()=>delfn(index)}>删除</a>
                </Space>
              ),
            },
          ]
    )
    const editfn = (item,index)=>{
        setEditIndex(index)
        setIsModalOpen(true)
        setIsadd("编辑")
        setTimeout(() => {
          myref.current.setFieldsValue(item)
        }, 300);
      
    }
    const delfn = (index)=>{
        dispatch(action.delfn(index))
    }
    const handleOk = () => {
      setIsModalOpen(false);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
      myref.current.resetFields()
    };
    let [selectVal,setSelectVal] = useState("")
    let searchfn = ()=>{
        dispatch(action.searchfn(selectVal))
    }
    let resetfn =()=>{
      dispatch(action.getlist())
    }
    const handleChange = (value) => {
        console.log(`selected ${value}`);
        setSelectVal(value)
      };
   let dispatch = useDispatch()
   let store = useSelector(state=>({...state.tablereducer}))
   useEffect(()=>{
       dispatch(action.getlist())
   },[])
   let addfn = ()=>{
      setIsadd("新增")
      setIsModalOpen(true)
   }
   const onFinish = (values) => {
    console.log('Success:', values);
    if (isadd === "新增") {
      dispatch(action.addFn(values))
    } else {
      dispatch(action.edifn(values,editIndex))
    }
   
    setIsModalOpen(false)
    myref.current.resetFields()
    
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
        <Select
      defaultValue="请选择"
      style={{
        width: 120,
      }}
      onChange={handleChange}
    //   "待处理","已发货","已完成"
      options={[
        {
          value: '待处理',
          label: '待处理',
        },
        {
          value: '已发货',
          label: '已发货',
        },
        {
          value: '已完成',
          label: '已完成',
        }
      ]}
    />
         <Button onClick={searchfn}>搜索</Button>
         <Button onClick={resetfn}>重置</Button>
         <Button onClick={addfn}>增加</Button>
         {
           (store.arr && store.arr.length ) &&  <Table columns={columns} dataSource={store.arr} />
         }
      
        <Modal title={isadd} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
        ref = {myref}
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="商品名"
      name="goodsname"
      rules={[
        {
          required: true,
          message: 'Please input your shopname!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="status"
      name="status"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="info"
      name="info"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="num"
      name="num"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="phone"
      name="phone"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>


        </Modal>
    </div>
  )
}

export default Shop